<?php
Yii::app()->clientScript->registerCoreScript('jquery');
?>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/highcharts.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery.template.js"></script>

<h1>路人数据统计</h1>
<!-- 基本信息 -->
<div class="title">基本数据</div>
<div class="chart">
    <div class="info"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/admin/icona.png" alt="" class="icon">
        <div class='name'>昨日路人数</div>
        <div class="math"><?php echo $model['guests'] ?></div>
        <div class='relative'><?php echo $model['guests'] > $model['guests2']?"较前一天上涨".Globals::percent($model['guests'] , $model['guests2']) :"较前一天下降".Globals::percent($model['guests'] , $model['guests2']) ?></div>
    </div>
    <div class="info"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/admin/iconb.png" alt="" class="icon">
        <div class='name'>一周内平均路人数</div>
        <div class="math"><?php echo $model['avgweek']  ?></div>
        <div class='relative'><?php echo $model['avgweek'] > $model['avgweek2']?"较前一周上涨".Globals::percent($model['avgweek'] , $model['avgweek2']) :"较前一周下降".Globals::percent($model['avgweek'] , $model['avgweek2']) ?></div>
    </div>
    <div class="info"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/admin/iconc.png" alt="" class="icon">
        <div class='name'>昨日路人数最高时段</div>
        <div class="math"><?php echo $model['hourtop']?>点</div>
        <div class='relative'><?php echo $model['hourtop'] > $model['hourtop2']?"较前一天推迟".Globals::diff($model['hourtop'] , $model['hourtop2'])  :"较前一天提前".Globals::diff($model['hourtop'] , $model['hourtop2'])  ?></div>
    </div>
    <div class="info"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/admin/icond.png" alt="" class="icon">
        <div class='name'>周平均路人最高时段</div>
        <div class="math"><?php echo $model['weekavghour']?>点</div>
        <div class='relative'><?php echo $model['weekavghour'] > $model['weekavghour2']?"较前一周推迟".Globals::diff($model['weekavghour'] , $model['weekavghour2'])  :"较前一周提前".Globals::diff($model['weekavghour'] , $model['weekavghour2'])  ?></div>
    </div>
    <div class="clear" style="height: 22px;"></div>
</div>
<script type="text/javascript">
$(function(){
    
    $(".timeexe").click(function(){
        chart1(this.id , '0' , this.innerText);
        $(".timeexe").removeClass('selected');
        $(this).addClass('selected');
    });

    $('.details').click(function(){
        $('#details-' + this.id).toggle();
        $(this).toggleClass('selected');
    });

    $('#<?php echo date("Y-m-d", strtotime("-1 month"));?>').click();

    chart2('<?php echo date("Y-m-d", strtotime("-1 day")); ?>', '<?php echo date("Y-m-d", strtotime("-1 day")); ?> 每小时路人数');
    chart3("路人月统计");

    $('#selectedhours').change(function(){
        chart2(this.value, this.value+' 每小时路人数');
    });
    $('#selectedend').change(function(){
        chart1($('#selectedstart').val(), this.value, '路人统计');
    });

});
var options = {
    chart: {
        type: 'areaspline',
        backgroundColor : '#F0F3F5'
    },
    colors: ['#8be135', '#ea418e', '#36ABE1'],  
    plotOptions: {
        areaspline: {
            fillOpacity: 0.2
        }
    },
    title: {
        text: ''
    },
    xAxis: {
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    series: [{
        name: '当日路人'
    }]
};

var options2 = {
    chart: {
        type: 'column',
        backgroundColor : '#F0F3F5'
    },
    colors: ['#ea418e'],
    title: {
        text: ''
    },
    xAxis: {
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    tooltip: {
        headerFormat: '{point.key}时',
        pointFormat: '{series.name}: <b>{point.y} 人</b>',
        shared: true,
        useHTML: true
    },
    series: [{
        name: '每小时路人数'
    }]
};

var options3 = {
    chart: {
        type: 'column',
        backgroundColor : '#F0F3F5'
    },
    colors: ['#36ABE1'],
    title: {
        text: ''
    },
    xAxis: {
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    tooltip: {
        headerFormat: '{point.key}月',
        pointFormat: ': <b>{point.y} 人</b>',
        shared: true,
        useHTML: true
    },
    series: [{
        name: '月统计'
    }]
};

function chart1(start , end , title){

    var url = "<?php echo Yii::app()->createUrl('stats/guestajax')?>&s="+start+"&e="+end+"&token="+ parseInt(new Date().valueOf());
    $.getJSON(url, function(data) {
        options.series[0].data = data.value;
        options.xAxis.categories = data.date;
        options.yAxis.title.text = title;
        options.chart.renderTo = 'guests';
        var chart = new Highcharts.Chart(options);

        $("#template-guest").loadTemplate($("#template"), data.list);
    });
}

function chart2(start , title){

    var url = "<?php echo Yii::app()->createUrl('stats/hourajax')?>&s="+start+"&token="+ parseInt(new Date().valueOf());
    $.getJSON(url, function(data) {
        options2.series[0].data = data.value;
        options2.xAxis.categories = data.date;
        options2.yAxis.title.text = title;
        options2.chart.renderTo = 'hour';
        var chart = new Highcharts.Chart(options2);

        $("#template-hour").loadTemplate($("#template2"), data.list);
    });
}

function chart3(title){

    var url = "<?php echo Yii::app()->createUrl('stats/rangeajax')?>&token="+ parseInt(new Date().valueOf());
    $.getJSON(url, function(data) {
        options3.series[0].data = data.value;
        options3.xAxis.categories = data.date;
        options3.yAxis.title.text = title;
        options3.chart.renderTo = 'chartrange';
        var chart = new Highcharts.Chart(options3);

        $("#template-range").loadTemplate($("#template3"), data.list);
    });
}
</script>
<!-- 路人人数统计 -->
<div class="title">路人每日人数统计
    <a href="javascript:" class="details" id="guest">展开详细数据</a>
    <a href="javascript:" class="timeexe" id="<?php echo date("Y-m-d", strtotime("-7 day"));?>">最近一周</a>
    <a href="javascript:" class="timeexe" id="<?php echo date("Y-m-d", strtotime("-1 month"));?>">最近一月</a>
    <a href="javascript:" class="timeexe" id="<?php echo date("Y-m-d", strtotime("-3 month"));?>">最近三月</a>
    <?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(
            'id'=>'selectedstart',
            'name'=>'selectedstart',
            'language'=>'zh',
            'options'=>array(
                'maxDate'=>'new Date()',  
                'dateFormat'=>'yy-mm-dd',
                'showAnim'=>'fold',
            ),
            'htmlOptions'=>array(
                'style'=>'width:90px;'
            ),
            'value'=>'请选择开始日期'
        )); ?> 
        <?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(
            'id'=>'selectedend',
            'name'=>'selectedend',
            'language'=>'zh',
            'options'=>array(
                'maxDate'=>'new Date()',  
                'dateFormat'=>'yy-mm-dd',
                'showAnim'=>'fold',
            ),
            'htmlOptions'=>array(
                'style'=>'width:90px;'
            ),
            'value'=>'请选择结束日期'
        )); ?> 
</div>

<div class="chart">
    <div id="details-guest" style="display: none;">
        <div>
            <div class="post-container thead">
                <div data-content="createtime">时间</div>
                <div data-content="guests">路人数（人）</div>
            </div>
            <div class="post-container thead">
                <div data-content="createtime">时间</div>
                <div data-content="guests">路人数（人）</div>
            </div>
        </div>
        <div id="template-guest">
            
        </div>
        <div class="clear"></div>
    </div>
    <div id="guests" style="width: 100%; height: 350px; margin: 0 auto"></div>
    
</div>

<!-- 路人每小时人数统计  -->
<div class="title">路人每小时人数统计
    <a href="javascript:" class="details" id="hours">展开详细数据</a>
    <?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(
            'id'=>'selectedhours',
            'name'=>'selectedhours',
            'language'=>'zh',
            'options'=>array(
                'maxDate'=>'new Date()',  
                'dateFormat'=>'yy-mm-dd',
                'showAnim'=>'fold',
            ),
            'htmlOptions'=>array(
                'style'=>'width:90px;'
            ),
            'value'=>'请选择日期'
        )); ?> 
</div>
<div class="chart">
    <div id="details-hours" style="display: none;">
        <div>
            <div class="post-container thead">
                <div data-content="createtime">时间</div>
                <div data-content="guests">路人数（人）</div>
            </div>
            <div class="post-container thead">
                <div data-content="createtime">时间</div>
                <div data-content="guests">路人数（人）</div>
            </div>
        </div>
        <div id="template-hour">
            
        </div>
        <div class="clear"></div>
    </div>
    <div id="hour" style="width: 100%; height: 350px; margin: 0 auto"></div>

</div>

<!-- 路人区间统计  -->
<div class="title">路人每月统计
    <a href="javascript:" class="details" id="range">展开详细数据</a>
</div>
<div class="chart">
    <div id="details-range" style="display: none;">
        <div>
            <div class="post-container thead">
                <div data-content="createtime">时间</div>
                <div data-content="guests">路人数（人）</div>
            </div>
            <div class="post-container thead">
                <div data-content="createtime">时间</div>
                <div data-content="guests">路人数（人）</div>
            </div>
        </div>
        <div id="template-range">
            
        </div>
        <div class="clear"></div>
    </div>

    <div id="chartrange" style="width: 100%; height: 350px; margin: 0 auto"></div>
</div>


<!-- Template -->
<script type="text/html" id="template">
    <div class="post-container">
        <div data-content="createtime"></div>
        <div data-content="guests"></div>
    </div>
</script>

<script type="text/html" id="template2">
    <div class="post-container">
        <div data-content="hour"></div>
        <div data-content="guests"></div>
    </div>
</script>

<script type="text/html" id="template3">
    <div class="post-container">
        <div data-content="month"></div>
        <div data-content="guests"></div>
    </div>
</script>
<div id="clear"></div>
